<template>
  <div id="coupon_management">
    <c-title :hide="false" :text="'优惠券管理'"></c-title>
    <section id="release-goods">
        <span>优惠券数量：{{coupon_length}}</span>
        <div class="release-b" v-if="is_publish==true">
          <router-link :to="fun.getUrl('CommodityCouponEdit',{id:'abc'})">发布优惠券</router-link>
        </div>
    </section>
    <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
     <div class="coupon_list">
        <div class="coupon_box" v-for="(item,index) in coupon" :key="index">
              <div class="coupon_left">
                  <div class="left_item" v-if="item.coupon_method===1">
                      <div class="deduct">
                        <span>{{ $i18n.t('money') }}</span>
                        <p class="left_a type_a">{{item.deduct}}</p>
                      </div>
                      <p class="left_b">满{{item.enough}}立减</p>
                  </div>
                  <div class="left_item left_type" v-if="item.coupon_method===2">
                      <p class="left_a">{{item.discount}}<span>折</span></p>
                      <p class="left_b">满{{item.enough}}立享</p>
                  </div>
              </div>
              <div class="coupon_right">
                  <div class="line"></div>
                  <ul class="right_info">
                    <li class="title">
                      <span class="info_a">{{item.name}}</span>
                      <i class="iconfont icon-more" @click="moreEvent(index)"></i>
                    </li>
                    <li class="lasttotal">剩余数量({{item.lasttotal}})</li>
                    <li class="info_c">
                        <span class="info_b" style="flex-shrink: 0;margin-right: 3.0313rem;">已使用：{{item.usetotal}}</span>
                        <span style="flex:1;text-align: left;">已发出：{{item.gettotal}}</span>
                    </li>
                  </ul>
              </div>
              <div class="more" v-show="item.edit_active">
                <ul>
                  <li @click="Toedit(item.id)">
                    <van-icon class="iconfont icon-edit" custom color="#fff" size="1.125rem"></van-icon>
                    <span>编辑</span>
                  </li>
                  <li @click="commodityDelete(index)">
                    <van-icon class="iconfont icon-delete" custom color="#fff" size="1.125rem"></van-icon>
                    <span>删除</span>
                  </li>
                  <li @click="provide(item.id)">
                    <van-icon class="iconfont icon-grant" custom color="#fff" size="1.125rem"></van-icon>
                    <span>发放</span>
                  </li>
                </ul>
                <div class="icon">
                  <van-icon class="iconfont icon-up" color="#A3A3A3" custom size="1.5rem"></van-icon>
                </div>
              </div>
        </div>
    </div>
     </van-pull-refresh>
     <h2 v-if="isShowNoTest" class="isShowNoTest">暂无数据</h2>
  </div>
</template>

<script>
import management_controller from "./management_controller";

export default management_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#coupon_management {
  #release-goods {
    background-color: #fff;
    display: flex;
    font-size: 16px;
    position: relative;
    height: 3rem;
    line-height: 3rem;
    padding-left: 0.75rem;
    border-bottom: solid 0.0625rem #ebebeb;
    color: #00001C;
    font-weight: 400;

    .release-b {
      position: absolute;
      right: 0.875rem;
      top: 0.6875rem;
      font-size: 14px;
      background-color: #f15353;
      height: 1.625rem;
      line-height: 1.625rem;
      padding: 0 0.625rem;
      display: block;
      border-radius: 0.8125rem;
      color: #fff;
    }
  }

  .coupon_list {
    padding: 0.9375rem;

    .coupon_box {
      width: 100%;
      height: 6.875rem;
      border-radius: 0.375rem;
      // overflow: hidden;
      background: #fff;
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 0.9375rem;

      .deduct{
          font-size: 0.75rem;
          display: flex;
          align-items: baseline;
          padding-left: 0.4688rem;
          span{
            margin-right: 0.1563rem;
          }
      }
      .coupon_left {
        // width: 6.25rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #F15353;
        position: relative;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        .left_item {

          .left_a {
            font-size: 1.25rem;
            line-height: 1;
            margin-bottom: 0.7188rem;
          }
        }
        .left_b{
          height: 1.5rem;
          line-height: 1.5rem;
          min-width: 4.375rem;
          padding: 0 0.625rem;
          box-sizing: border-box;
          white-space: nowrap;
          font-size: 0.75rem;
          position: relative;
        }
        .left_b::after{
          content:"";
          position: absolute;
          left:0;
          right: 0;
          top: 0;
          bottom: 0;
          background-color: #F15353;
          border-radius: 0.25rem;
          opacity: 0.15;
        }
        .left_type {
          .left_a {
            span {
              font-size: 14px;
              margin-left: 0.1563rem;
            }
          }
        }
      }

      // .coupon_left::after {
      //   box-sizing: border-box;
      //   position: absolute;
      //   top: 0;
      //   right: -0.375rem;
      //   bottom: 0;
      //   content: "• • • • • • • • • • • • • ";
      //   line-height: 0.625rem;
      //   height: 6.875rem;
      //   width: 0.75rem;
      //   color: #fff;
      //   font-size: 1.5rem;
      //   overflow: hidden;
      //   z-index: 1;
      // }
        .title{
          display: flex;
          justify-content: space-between;
          font-size: 0.875rem;
        }
        .lasttotal{
          text-align: left;
          font-weight: 400;
          font-size: 0.75rem;
          color: #999999;
        }
        .icon-more{
          color:#CCCCCC;
        }
        .line{
          position: absolute;
          left: 0;
          top: 0.75rem;
          bottom:0.5625rem;
          width: 1px;
          border-left: 1px dotted #E7E7E7;
        }
      .coupon_right {
        position: relative;
        width: 15.3125rem;
        height: 100%;
        padding: 0.75rem 0.75rem 0.5625rem 1.25rem;
        .right_info {
          .info_a {
            font-size: 0.875rem;
            text-align: left;
            height: 2.5rem;
            // margin-bottom: 0.625rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #00001C;
          }

          .info_b {
            color: #8c8c8c;
            font-size: 12px;
            text-align: left;
            line-height: 1.5rem;
          }

          .info_c {
            color: #8c8c8c;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            line-height: 1.5rem;

            span {
              margin-right: 1.25rem;
            }

            i {
              font-size: 1.125rem;
            }
          }
        }
      }
      .more::after{
        content:"";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #333333;
        opacity: 0.45;
        z-index: 0;
        border-radius: 0.3125rem;
        overflow: hidden;
      }
      .more {
        width: 4.8125rem;
        position: absolute;
        right: 0.375rem;
        top: 2rem;
        padding:0.25rem 0;
        font-size: 0.75rem;
        z-index: 1;

        ul {
          color: #FFFFFF;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          z-index: 5;
          li:nth-child(2n){
            margin: 0.5rem 0;
          }

          li {
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 12px;

            i {
              display: block;
              margin-top: 0.125rem;
              margin-right: 0.125rem;
            }
          }
        }

        .icon {
          position: absolute;
          right: 0;
          top:-0.7813rem;
          z-index: 1;

          i {
            color: rgba(51, 51, 51, 0.9);
          }
        }
      }
    }
  }

  .isShowNoTest {
    padding: 10px 0;
    color: #666;
  }
}
</style>
